<template>
  <div class="list">
    <!-- <div style="color:#1890ff;font-size:16px;margin-bottom:10px">
      劳务单位
    </div>-->
    <div class="flexAround" style="margin-bottom:30px">
      <div class="part1_div">
        <div>分包单位</div>
        <div>{{this.laborData.labourTotal}}</div>
      </div>
      <div class="part1_div">
        <div>班组</div>
        <div>{{this.laborData.teamTotal}}</div>
      </div>
      <div class="part1_div" style="  border-right: none;">
        <div>在场人数</div>
        <div>{{this.laborData.inPersonTotal}}</div>
      </div>
    </div>

    <div class="flexBetween" style="margin-bottom:10px">
      <div style="color:#333;font-size:18px">单位列表</div>
      <div class="flexBetween">
        <!-- <div style="margin-right:30px">
          <a-radio-group v-model="radioGroup" :style="{ marginBottom: '8px' }">
            <a-radio-button value="1">全部</a-radio-button>
            <a-radio-button value="2">在场</a-radio-button>
            <a-radio-button value="3">离场</a-radio-button>
          </a-radio-group>
        </div> -->
        <div>
          <a-input-search placeholder="请输入单位名称查询" style="width: 200px" @search="onSearch" v-model="likeName"/>
          <br />
        </div>
      </div>
    </div>
    <div>
      <a-table :columns="columns" :data-source="this.laborData.labourOrgVOList" @change="onChange">
        <div
          class="td_name"
          slot="laborName"
          slot-scope="text,record"
          @click="labor_info(record)"
        >{{ text }}</div>
        <div slot="teamVOList" slot-scope="text">
          <span style="margin-right:15px" v-for="(item,index) in text" :key="index">{{item.name}}</span>
        </div>
      </a-table>
    </div>
  </div>
</template>

<script>
import { queryLabourOrg} from '@/api/construction'
export default {
  // props: ['laborData'],
  data() {
    return {
      radioGroup: '1',
      columns: [
        {
          title: '单位名称',
          dataIndex: 'name',
          key: 'laborName',
          scopedSlots: { customRender: 'laborName' },
          align: 'center'
        },
        {
          title: '班组',
          dataIndex: 'teamVOList',
          key: 'teamVOList',
          scopedSlots: { customRender: 'teamVOList' },
          align: 'center'
        },
        {
          title: '在场人数',
          dataIndex: 'inPersonTotal',
          align: 'center'
        }
        // {
        //   title: "负责人",
        //   dataIndex: "personCharge",
        //   align: "center"
        // },
        // {
        //   title: "联系电话",
        //   dataIndex: "tell",
        //   align: "center"
        // },
        // {
        //   title: "进场时间",
        //   dataIndex: "entryTime",
        //   align: "center"
        // },
        // {
        //   title: "离场时间",
        //   dataIndex: "leaveTime",
        //   align: "center"
        // }
      ],
      laborData:{},
      likeName:''
      // data:this.laborData.labourOrgVOList
    }
  },

  methods: {
    onSearch() {
      this.getTable()
    },
    onChange(pagination, filters, sorter) {
      console.log('params', pagination, filters, sorter)
    },
    getTable() {
      let data = {
        orgId: sessionStorage.getItem('gatewayId'),
        projectId: sessionStorage.getItem('projectId'),
        page: 0,
        size: 0,
        likeName:this.likeName
      }
      queryLabourOrg(data).then((res) => {
        let data = res.data.data
        if (data.labourOrgVOList == null) {
          data.labourOrgVOList = []
        }
        data.labourOrgVOList.forEach((item) => {
          item.key = item.id
        })
        this.laborData = data
        // console.log(res);
      })
    },
    labor_info(record) {
      // console.log(record)
      sessionStorage.setItem('laborVoListId', record.id)
      sessionStorage.setItem('unitName', record.name)
      this.$router.push({ path: '/laborUnit' })
    }
  },
  mounted(){
    this.getTable()
  }
}
</script>

<style scoped>
::v-deep .ant-table-pagination.ant-pagination {
  display: none;
}
.part1_div {
  width: 375px;
  height: 50px;
  border-right: 1px solid #ccc;
  text-align: center;
}
.part1_div :nth-child(1) {
  color: #ccc;
  font-size: 14px;
}
.part1_div :nth-child(2) {
  color: #333;
  font-size: 23px;
}
.title {
  color: #1890ff;
  font-size: 16px;
  margin-bottom: 10px;
}
.td_name {
  color: #1890ff;
  cursor: pointer;
}
</style>
